<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    th {
        width: 300px;
        margin-top: 100px;
    }
   
    div{
        width: 500px;
        height: 400px;
        background: rgb(179, 255, 0);
        display: none;
    }
    p{font-size: 26px;}
    input{
        width: 480px;
        height: 30px;;
    }
</style>

<body>
    <button id="a2">我要留言</button>
    <table>
        <tr>
            <th>ID</th>
            <th>标题</th>
            <th>留言人</th>
            <th>内容</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
    </table>
    <div id="a1">
     <p>发布留言</p>
     <h3>留言标题:</h3>
     <input type="text">
     <h3>留言人:</h3>
     <input type="text">
     <h3>留言内容:</h3>
     <input type="text">
     <br/>
     <button id="a3">关闭</button>
     <button id="a4">发布</button>
    </div>
</body>
<script>
    
    var a5 = new XMLHttpRequest ()
    a5.open("GET","https://liu.zzgoodqc.cn/lyb")
    a5.onreadystatechange=function(){
        if(a5.readyState==4 && a5.status == 200){
        var a6=JSON.parse(a5.responseText)
        console.log(a6);
        if (a6.code==200){
        var a7 = ''
        for (let a8 in a6.data){
         a7+=`<tr><th>${a6.data[a8].id}</th>
            <th>${a6.data[a8].content}</th>
            <th>${a6.data[a8].name}</th>
            <th>${a6.data[a8].title}</th>
            <th>${a6.data[a8].updated_at}</th>
            <th><button>删除</button></th>
            </tr>`
        }
        document.getElementsByTagName('tbody')[0].innerHTML += a7
        }
        }
    }
    a5.send()
    
a2.onclick = function (){
    document.getElementById('a1').style.display= "block"

a3.onclick = function (){
    document.getElementById('a1').style.display= "none"
}
}

    
</script>

</html>